<template>
  <div class="result">
    <div class="result-left">
      <div class="resultTitle">总分：{{ allscore() || 0 }}分</div>
      <div class="result-content">
        <div class="secondTitle">
          <span>语音质检评分（权重70%）：{{ (resultdata.totalscore * 100) / 100 || 0 }}分</span>
          <span class="spanBtn" @click="dialogVisible = true">查看详情</span>
        </div>

        <div class="echart1" id="CANVAS1"></div>

        <div class="secondTitle">
          <span>情绪控制评分（权重30%）：{{ emitdata() || 0 }}分</span>
          <!-- <span class="spanBtn">查看详情</span> -->
        </div>
        <div class="echart1" id="CANVAS2"></div>
      </div>
    </div>
    <div class="result-right">
      <div class="resultTitle">
        <span>话术规范</span>

        <span @click="goHome">返回首页</span>
      </div>
      <div class="result-content">
        <div class="table">
          <div class="table-tr thead">
            <div class="table-th">模块</div>
            <div class="table-th">话术标题</div>
            <div class="table-th">建议表达</div>
          </div>
          <div class="table-tr tbody" v-for="(item, key, index) in showoneList()">
            <div class="table-th">{{ key }}</div>
            <div class="table-th">
              <p v-for="item2 in item">{{ item2.sentence }}</p>
            </div>
            <div class="table-th">
              <p v-for="item2 in item">{{ item2.standsentence || '无' }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisible" width="80%" :show-close="false" :before-close="handleClose">
      <div slot="title" class="backTitle">
        <span class="BackCss" @click="dialogVisible = false">BACK</span>
      </div>
      <showDetail :showdata="showoneList()" />
    </el-dialog>
  </div>
</template>
<script>
import assetsData from '../../utils/assets.js';
import showDetail from '../../components/TableShow.vue';
export default {
  name: 'result',
  data() {
    return {
      dialogVisible: false,
      SpeakSpeed: [],
      ExpressionList: [],
      ShowExpressionList: [],
      resultdata: [],
    };
  },
  components: {
    showDetail,
  },
  methods: {
    handleClose(e) {
      e();
    },
    DrowEchart(dom) {
      var dom;
      var app = {};
      var option;
      var echarts = require('echarts');
      var chartDom = document.getElementById(dom);
      var myChart = echarts.init(chartDom);
      if (myChart == null) {
        myChart = echarts.init(dom);
      }
      if (dom == 'CANVAS1') {
        let data = this.showoneList();
        if (!data) return;
        let Xdata = Object.keys(data);
        let Xdata2 = [];
        let Ydata = [];
        Xdata.forEach(item => {
          let count = 0;
          let allcount = 0;
          data[item].forEach(item2 => {
            count += item2.score - 0;
            allcount += item2.fullscore - 0;
          });
          Xdata2.push({
            text: item,
            max: 100,
          });

          Ydata.push(Math.ceil((count / allcount) * 100));
        });
        console.log(Ydata);
        option = {
          tooltip: {
            trigger: 'axis',
          },
          radar: [
            {
              indicator: Xdata2,
              name: {
                formatter: data => {
                  let str = data.substring(0, 5);
                  let str1 = data.substring(5) || '';
                  if (str1) {
                    return `${str}\n${str1}`;
                  }
                  return data;
                },
                textStyle: {
                  color: '#303030',
                },
              },
            },
          ],
          color: ['#CA5B6C'],
          series: [
            {
              type: 'radar',
              tooltip: {
                trigger: 'item',
              },
              areaStyle: {},
              data: [
                {
                  value: Ydata,
                  name: '得分',
                },
              ],
            },
          ],
        };
      }

      if (dom == 'CANVAS2') {
        let data = this.ExpressionList;
        let Xdata = [];
        let Ydata = [];

        let count = 0;
        data.forEach(item => {
          console.log(item);
          if (item.emotion == '' || item.emotion == 'neutral') {
            count += item.count - 0;
          } else {
            Xdata.push(item.emotion ? assetsData.emotionName2[item.emotion] : 'neutral');
            Ydata.push(item.count);
          }
        });
        Xdata.push('neutral');
        Ydata.push(count);

        option = {
          grid: {
            left: '15%',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },

          xAxis: {
            type: 'value',
            // show: false,
          },
          color: ['#ECA0AB'],
          yAxis: {
            type: 'category',
            data: Xdata,
          },
          series: [
            {
              name: 'Direct',
              type: 'bar',
              stack: 'total',
              barWidth: 16,
              data: Ydata,
            },
          ],
        };
      }
      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }
    },

    showoneList() {
      if (!this.resultdata.detail) return;
      let obj = {};
      this.resultdata.detail.forEach(item => {
        if (!obj[item.scene]) {
          obj[item.scene] = [];
          obj[item.scene].push(item);
        } else {
          obj[item.scene].push(item);
        }
      });
      console.log('aaa');
      return obj;
    },

    // 获取考试得分
    getExamData() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      });
      this.$axios
        .Postdata('manage/Voicerecordreport.asmx/getExamScore', {
          data: JSON.stringify(
            this.$Help.QMdata({
              // examid: '3275',
              examid: this.examid,
            })
          ),
        })
        .then(res => {
          loading.close();
          this.resultdata = res;
          this.$nextTick(() => {
            this.DrowEchart('CANVAS1');
            this.DrowEchart('CANVAS2');
          });
        })
        .catch(res => {
          this.$message.error('网络错误');
          loading.close();
        });
    },
    //  获取对话
    // getAnswerListFun() {
    //   this.$axios
    //     .Postdata('manage/Voicerecordreport.asmx/getAnswerList', {
    //       data: JSON.stringify(
    //         this.$Help.QMdata({
    //           examid: '3275',
    //           pageindex: '',
    //           pagesize: 0,
    //         })
    //       ),
    //     })
    //     .then(res => {
    //       this.getAnswerListData = res;
    //     });
    // },
    emitdata() {
      let count = 0;
      this.ShowExpressionList.forEach(item => {
        count += item ? assetsData.emotion3[item] - 0 : 50;
      });
      return Math.ceil(count / this.ShowExpressionList.length) || 0;
    },
    allscore() {
      let count = this.emitdata();
      return Math.round(count * 0.3 + this.resultdata.totalscore * 0.7);
    },
    goHome() {
      this.$router.push({ name: 'HomeTwo' });
    },
  },
  computed: {},
  mounted() {},
  created() {
    this.examid = localStorage.getItem('examid');
    this.getExamData();
    // this.getAnswerListFun();
    this.SpeakSpeed = JSON.parse(localStorage.getItem('SpeakSpeed')); // 语速
    this.ShowExpressionList = JSON.parse(localStorage.getItem('ShowExpressionList')); // 表情
    this.ExpressionList = JSON.parse(localStorage.getItem('ExpressionList')); // 表情绘总
  },
};
</script>
<style lang="less" scoped>
.result {
  display: flex;
  width: 100%;
  justify-content: flex-start;
}
.resultTitle {
  width: 411px;
  height: 45px;
  background: #9e0018;
  border: 1px solid #9e0018;
  align-items: center;
  line-height: 45px;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  box-sizing: border-box;
  padding: 0 17px;
  display: flex;
  justify-content: space-between;
  span {
    cursor: pointer;
  }
}
.result-right {
  flex: 1;
  margin-left: 10px;
}
.result-right .resultTitle {
  flex: 1;
  width: 100%;
}
.result-content {
  background-color: #ffffff;
  border: 1px solid #dcdcdd;
  height: 681px;
}
.result-right .result-content {
  border: none;
  box-sizing: border-box;
}

.table,
.table * {
  margin: 0 auto;
  padding: 0;
  font-size: 14px;
}
.table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  color: #303030;
  font-size: 16px;
}
.thead {
  height: 35px;
  background: #f4f4f4;
}
.table-tr {
  display: table-row;
}
.table-th {
  display: table-cell;
  height: 100%;
  border: 1px solid #dcdcdd;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
}
.table-td {
  display: table-cell;
  height: 100%;
  border: 1px solid gray;
  text-align: center;
  vertical-align: middle;
}
.tbody .table-th {
  color: #303030;
  font-size: 16px;
  min-width: 150px !important;
}

.tbody p {
  line-height: 64px;
  border-bottom: 1px solid #dcdcdd;
}
.tbody p:nth-child(2n) {
  background-color: #f4f4f4;
}
.tbody p:last-of-type {
  border-bottom: none;
}
.secondTitle {
  font-size: 18px;
  font-weight: bold;
  color: #303030;
  box-sizing: border-box;
  padding: 14px 12px;
  display: flex;
  height: 24px;
  justify-content: space-between;
  align-items: center;
}
.spanBtn {
  box-sizing: border-box;
  padding: 4px 10px;
  background: #ffecef;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
  color: #9e0018;
}
.echart1 {
  min-height: 300px;
  width: 100%;
}
#CANVAS1 {
  height: 350px;
}
.BackCss {
  display: inline-block;
  padding: 5px 10px;
  background-color: #9e0018;
  color: #fff;
  cursor: pointer;
}
.backTitle {
  display: flex;
  justify-content: flex-end;
}
</style>
